<template>
  <div class="home-view">
    <!-- Hero区域 -->
    <section class="hero-section relative overflow-hidden">
      <div class="absolute inset-0 bg-gradient-to-br from-background-apricot to-background-cream"></div>
      
      <!-- 云朵装饰 -->
      <div class="absolute top-10 left-10 w-20 h-12 bg-white rounded-full opacity-20 animate-bounce"></div>
      <div class="absolute top-20 right-20 w-16 h-8 bg-white rounded-full opacity-30 animate-bounce" style="animation-delay: 1s;"></div>
      <div class="absolute bottom-20 left-1/4 w-24 h-16 bg-white rounded-full opacity-15 animate-bounce" style="animation-delay: 2s;"></div>
      
      <div class="relative z-10 max-w-6xl mx-auto px-6 py-16 md:py-24">
        <div class="grid md:grid-cols-2 gap-12 items-center">
          <div class="text-center md:text-left">
            <h1 class="text-5xl md:text-7xl font-bold text-text-primary mb-6 leading-tight">
              跟着古诗去旅行
            </h1>
            <p class="text-xl md:text-2xl text-text-secondary mb-8 leading-relaxed">
              {{ collectionInfo?.description || '24首经典古诗，和小朋友一起开启诗词之旅！' }}
            </p>
            
            <div class="flex flex-col sm:flex-row gap-4 justify-center md:justify-start">
              <button 
                @click="scrollToPoetryGrid" 
                class="btn-primary focus-ring"
              >
                开始学习
              </button>
              <button 
                @click="goToCategory" 
                class="btn-secondary focus-ring"
              >
                按主题浏览
              </button>
            </div>
            
            <div class="mt-8 flex justify-center md:justify-start items-center space-x-8 text-text-secondary">
              <div class="text-center">
                <div class="text-2xl font-bold text-primary-coral">{{ collectionInfo?.total_count || 24 }}</div>
                <div class="text-sm">首古诗</div>
              </div>
              <div class="text-center">
                <div class="text-2xl font-bold text-secondary-turquoise">{{ progressPercentage }}%</div>
                <div class="text-sm">学习进度</div>
              </div>
              <div class="text-center">
                <div class="text-2xl font-bold text-accent-green">{{ masteredCount }}</div>
                <div class="text-sm">已掌握</div>
              </div>
            </div>
          </div>
          
          <div class="flex justify-center">
            <img 
              src="/images/character_guide_5.jpg" 
              alt="小书童" 
              class="w-64 h-64 object-cover rounded-full shadow-card animate-bounce"
            />
          </div>
        </div>
      </div>
    </section>
    
    <!-- 分类浏览区 -->
    <section class="py-16 md:py-24">
      <div class="max-w-6xl mx-auto px-6">
        <h2 class="text-3xl md:text-4xl font-bold text-text-primary text-center mb-12">
          分类浏览
        </h2>
        
        <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
          <div 
            v-for="theme in themes" 
            :key="theme.key"
            @click="selectTheme(theme.key)"
            class="bg-white rounded-card p-6 shadow-card hover:shadow-cardHover transform hover:-translate-y-2 transition-all duration-300 cursor-pointer text-center group"
          >
            <div class="w-16 h-16 mx-auto mb-4 rounded-circle overflow-hidden">
              <img 
                :src="theme.icon" 
                :alt="theme.name" 
                class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
              />
            </div>
            <h3 class="text-lg font-bold text-text-primary mb-2">{{ theme.name }}</h3>
            <p class="text-sm text-text-secondary">{{ theme.count }}首古诗</p>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 古诗卡片网格 -->
    <section ref="poetryGridSection" class="py-16 md:py-24 bg-white">
      <div class="max-w-6xl mx-auto px-6">
        <div class="flex items-center justify-between mb-12">
          <h2 class="text-3xl md:text-4xl font-bold text-text-primary">
            古诗集锦
          </h2>
          
          <div class="flex items-center space-x-4">
            <div class="text-right">
              <div class="text-lg font-bold text-primary-coral">{{ poetryCollection?.poems.length || 24 }}</div>
              <div class="text-sm text-text-secondary">首古诗</div>
            </div>
            <ProgressRing :progress="progressPercentage" :size="80" />
          </div>
        </div>
        
        <!-- 搜索框 -->
        <div class="mb-8">
          <div class="relative max-w-md mx-auto md:mx-0">
            <input
              v-model="searchQuery"
              type="text"
              placeholder="搜索古诗、作者..."
              class="w-full py-4 px-6 rounded-input bg-white border-2 border-gray-200 text-lg focus:border-primary-coral focus:outline-none transition-colors"
            />
            <div class="absolute right-4 top-1/2 transform -translate-y-1/2">
              <img src="/images/icon_book_3.jpg" alt="搜索" class="w-6 h-6" />
            </div>
          </div>
        </div>
        
        <PoetryGrid :poems="displayedPoems" :search-query="searchQuery" />
      </div>
    </section>
    
    <!-- 进度与成就中心 -->
    <section class="py-16 md:py-24">
      <div class="max-w-6xl mx-auto px-6">
        <h2 class="text-3xl md:text-4xl font-bold text-text-primary text-center mb-12">
          我的成就
        </h2>
        
        <div class="grid md:grid-cols-2 gap-12">
          <!-- 学习统计 -->
          <div class="bg-white rounded-card p-8 shadow-card">
            <h3 class="text-2xl font-bold text-text-primary mb-6">学习统计</h3>
            
            <div class="space-y-6">
              <div class="flex items-center justify-between">
                <span class="text-lg text-text-secondary">已学习</span>
                <div class="flex items-center space-x-2">
                  <ProgressRing :progress="progressPercentage" :size="40" />
                  <span class="text-xl font-bold text-primary-coral">{{ learnedCount }} / 24</span>
                </div>
              </div>
              
              <div class="flex items-center justify-between">
                <span class="text-lg text-text-secondary">已掌握</span>
                <div class="flex items-center space-x-2">
                  <div class="w-10 h-10 rounded-circle bg-accent-green flex items-center justify-center">
                    <span class="text-white font-bold text-sm">✓</span>
                  </div>
                  <span class="text-xl font-bold text-accent-green">{{ masteredCount }} 首</span>
                </div>
              </div>
              
              <div class="flex items-center justify-between">
                <span class="text-lg text-text-secondary">连续学习</span>
                <div class="flex items-center space-x-2">
                  <img src="/images/badge_trophy_8.jpg" alt="连续" class="w-8 h-8" />
                  <span class="text-xl font-bold text-accent-yellow">{{ progressStore.progress.current_streak }} 天</span>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 成就徽章 -->
          <div class="bg-white rounded-card p-8 shadow-card">
            <h3 class="text-2xl font-bold text-text-primary mb-6">获得徽章</h3>
            
            <div class="grid grid-cols-3 gap-4">
              <div 
                v-for="achievement in unlockedAchievements" 
                :key="achievement.id"
                class="text-center group"
              >
                <div class="w-16 h-16 mx-auto mb-2 rounded-circle overflow-hidden bg-accent-yellow p-2 group-hover:scale-110 transition-transform">
                  <img 
                    :src="`/images/${achievement.icon}_0.jpg`" 
                    :alt="achievement.name"
                    class="w-full h-full object-cover"
                  />
                </div>
                <p class="text-sm font-semibold text-text-primary">{{ achievement.name }}</p>
              </div>
              
              <div 
                v-for="achievement in lockedAchievements" 
                :key="achievement.id"
                class="text-center opacity-50"
              >
                <div class="w-16 h-16 mx-auto mb-2 rounded-circle overflow-hidden bg-gray-200 p-2">
                  <div class="w-full h-full bg-gray-300 rounded-circle flex items-center justify-center">
                    <span class="text-gray-500 text-xs">???</span>
                  </div>
                </div>
                <p class="text-sm text-text-tertiary">???</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { usePoetryStore } from '@/stores/poetry'
import { useProgressStore } from '@/stores/progress'
import PoetryGrid from '@/components/PoetryGrid.vue'
import ProgressRing from '@/components/ProgressRing.vue'
import type { Poetry } from '@/types'

const router = useRouter()
const poetryStore = usePoetryStore()
const progressStore = useProgressStore()

const searchQuery = ref('')
const poetryGridSection = ref<HTMLElement>()

// 获取古诗集合信息
const collectionInfo = computed(() => poetryStore.poetryCollection?.collection_info)

// 计算已学习和掌握的数量
const learnedCount = computed(() => progressStore.progress.learned_poems.length)
const masteredCount = computed(() => progressStore.progress.mastered_poems.length)
const progressPercentage = computed(() => progressStore.getProgressPercentage.value)

// 获取解锁和锁定的成就
const unlockedAchievements = computed(() => progressStore.getUnlockedAchievements.value)
const lockedAchievements = computed(() => progressStore.getLockedAchievements.value)

// 主题分类
const themes = ref([
  {
    key: 'spring',
    name: '春天',
    icon: '/images/theme_spring_2.jpg',
    count: 0
  },
  {
    key: 'summer',
    name: '夏天',
    icon: '/images/theme_summer_5.png',
    count: 0
  },
  {
    key: 'autumn',
    name: '秋天',
    icon: '/images/theme_autumn_4.jpg',
    count: 0
  },
  {
    key: 'winter',
    name: '冬天',
    icon: '/images/theme_winter_0.jpg',
    count: 0
  },
  {
    key: 'animal',
    name: '动物',
    icon: '/images/theme_animal_0.jpg',
    count: 0
  },
  {
    key: 'landscape',
    name: '山水',
    icon: '/images/theme_landscape_0.jpg',
    count: 0
  },
  {
    key: 'family',
    name: '亲情',
    icon: '/images/theme_family_5.jpg',
    count: 0
  },
  {
    key: 'all',
    name: '全部',
    icon: '/images/icon_book_3.jpg',
    count: 24
  }
])

// 显示的古诗（搜索后）
const displayedPoems = computed(() => {
  if (!searchQuery.value.trim()) {
    return poetryStore.poetryCollection?.poems || []
  }
  return poetryStore.searchPoems(searchQuery.value)
})

// 滚动到古诗网格
const scrollToPoetryGrid = () => {
  poetryGridSection.value?.scrollIntoView({ behavior: 'smooth' })
}

// 跳转到分类页面
const goToCategory = () => {
  router.push('/category')
}

// 选择主题
const selectTheme = (themeKey: string) => {
  if (themeKey === 'all') {
    scrollToPoetryGrid()
  } else {
    router.push('/category')
  }
}

// 初始化时计算主题数量
onMounted(() => {
  themes.value.forEach(theme => {
    if (theme.key !== 'all') {
      theme.count = poetryStore.getPoemsByTheme(theme.key).length
    }
  })
})
</script>

<style scoped>
.hero-section {
  min-height: 70vh;
  display: flex;
  align-items: center;
}

@media (min-width: 768px) {
  .hero-section {
    min-height: 80vh;
  }
}
</style>